<template>
    <section>
        <div class="message">
            <mt-datetime-picker
              :startDate="startBirthDate"
              :endDate='endBirthDate'
              @confirm="handleDateConfirm"
              ref="picker"
              type="date"
              v-model="pickerValue">
            </mt-datetime-picker>
            <mt-datetime-picker
              :startDate='startConfirmDate'
              @confirm="handleDiagnosticDateConfirm"
              ref="diagnosticPicker"
              type="date"
              v-model="pickerAnotherValue">
            </mt-datetime-picker>
            <p class="myrow">
              <span class="w4">姓名</span>
              <cube-input
                v-model="username"
                class="w3">
              </cube-input>
            </p>
            <p class="myrow">
              <span class="w4">性别</span>
              <cube-select
              :placeholder='info'
              v-model="gender"
              :options="sex">
              </cube-select>
            </p>
            <p class="myrow">
              <span class="w4">生日</span>
              <span class="w1" @click="choseDate()">
                <span>{{bornDate}}</span>
              </span>
            </p>
            <!-- <p class="myrow">
              <span class="w4">生日</span>
              <cube-input
                :type="type"
                v-model="bornDate"
                class="w3">
              </cube-input>
            </p> -->
            <p class="myrow">
              <span class="w4">体重</span>
              <cube-input
                :type="weighttype"
                v-model="weight"
                class="w3">
              </cube-input>
            </p>
            <p class="myrow">
              <span class="w4">家族史</span>
              <cube-input
                v-model="familyHistory"
                class="w3">
              </cube-input>
            </p>
             <p class="myrow">
              <span class="w4">肿瘤名称</span>
              <cube-select
              :placeholder='info'
              v-model="TumorName"
              :options="TumorStore">
              </cube-select>
            </p>
            <!-- <p class="myrow">
              <span class="w4">确诊时间</span>
              <cube-input
                :type="type"
                v-model="DiagnosticTime"
                class="w3">
              </cube-input>
            </p> -->
            <p class="myrow">
              <span class="w4">确诊时间</span>
              <span class="w1" @click="choseDiagnosticDate()">
                <span>{{DiagnosticTime}}</span>
              </span>
            </p>
            <p class="myrow">
              <span class="w4">体力状况</span>
              <cube-select
              :placeholder='info'
              v-model="bodySituation"
              :options="bodySituationStore">
              </cube-select>
            </p>
            <p class="myrow">
              <span class="w4">大脑状况</span>
              <cube-select
              :placeholder='info'
              v-model="headSituation"
              :options="headSituationStore">
              </cube-select>
            </p>
            <p class="next" @click="saveBaseInfo">保存基本信息</p>
        </div>
    </section>
</template>
<script>

import { Field ,Indicator} from "mint-ui";
import { MessageBox } from "mint-ui";
import { updateCase, createCase, updatePatientProfile } from "../../api/api";
export default {
  data() {
    return {
      showBodySituation:'',
      startBirthDate:new Date('1900-01-01'),
      endBirthDate:new Date(),
      startConfirmDate:new Date('1980-01-01'),
      pickerAnotherValue:'',
      pickerValue:'',
      info:' ',
      weighttype:'number',
      type:'date',
      isNewBaseInfo: true,
      caseId: "", //病例ID
      userId: "", //用户iD
      TumorName: "", //肿瘤名称
      weight: "", //体重
      gender: '', //性别
      username: "", //姓名
      bornDate: "", //生日
      familyHistory: "", //家族史
      bodySituation: "", //体力状况
      headSituation: "", //大脑状况
      DiagnosticTime: "", //确诊时间
      genderStore:['男','女'],
      sex: [
        {
          text: "男",
          value: 0
        },
        {
          text: "女",
          value: 1
        }
      ],
      bodySituationStore: [
         "活动能力完全正常，与起病前活动能力无任何差异",
         "能自由走动及从事轻体力活动，包括一般家务或办公室工作，但不能从事较重的体力活动",
         "能自由走动及生活自理，但已丧失工作能力，日间不少一半时间可以起床活动",
         "生活仅能部分自理，日间一半以上时间卧床或坐轮椅",
         '卧床不起，生活不能自理'
      ],
      headSituationStore: [
         "有脑转",
         "无脑转"
      ],
      TumorStore: ['肺麟癌','肺腺癌','小细胞癌','大细胞癌','其他']
    };
  },
  methods: {
    choseDate() {
      this.$refs.picker.open();
    },
    choseDiagnosticDate(){
      this.$refs.diagnosticPicker.open();
    },
    handleDiagnosticDateConfirm(val){
      console.log(val);
      var YearNum=val.getFullYear();
      var MonthNum=val.getMonth()+1;
      var DayNum=val.getDate();
      if(MonthNum<10){
        MonthNum='0'+MonthNum
      }
      if(DayNum<10){
        DayNum='0'+DayNum
      }
      this.DiagnosticTime =
        YearNum + "-" + MonthNum + "-" + DayNum;
    },
    handleDateConfirm(val) {
      console.log(val);
      var YearNum=val.getFullYear();
      var MonthNum=val.getMonth()+1;
      var DayNum=val.getDate();
      if(MonthNum<10){
        MonthNum='0'+MonthNum
      }
      if(DayNum<10){
        DayNum='0'+DayNum
      }
      this.bornDate =
        YearNum + "-" + MonthNum + "-" + DayNum;
    },
    testDate:function(){
      console.log('生日',bornDate);
      console.log('确诊',DiagnosticTime);
    },
    saveBaseInfo: function() {
      console.log(this.username);
      console.log(this.gender);
      console.log(this.bornDate);
      if (this.username == "" || this.bornDate=='') {
          console.log('2131321313')
        MessageBox('提示', '请填写姓名年龄生日等基本信息');
      } else {
        console.log('时间字符串长度====>',this.bornDate.length);
        if(this.bornDate.length==10){
          this.bornDate+=' 00:00:00'
        }
        let userInfo = {
          Id: this.userId,
          Name: this.username,
          Gender: this.gender,
          Birthday :this.bornDate,

        };
        updatePatientProfile(userInfo).then(res => {
          if (res.data.IsSuccess) {
            console.log("保存成功");
          }
        });
        if (this.isNewBaseInfo == true) {
          this.createCase();
        } else {
          this.updateCase();
        }
      }
    },
    updateCase: function() {
      if(this.DiagnosticTime){
        if(this.DiagnosticTime.length==10){
          this.DiagnosticTime+=' 00:00:00'
        }
      }
      let param = {
        // CreateTime:this.CreateTime,
        Id: this.caseId,
        UserId: this.userId,
        TumorName: this.TumorName,
        DiagnosticTime: this.DiagnosticTime,
        FamilyHistory: this.familyHistory,
        PhysicalCondition: this.bodySituation,
        Weight: this.weight,
        BrainCondition: this.headSituation
      };
      Indicator.open({
        spinnerType: 'fading-circle'
      }); 
      updateCase(param).then(res => {
        if (res.data.IsSuccess) {
          Indicator.close();
          MessageBox("提示", "更新成功");
          localStorage.setItem("RecordId", this.caseId);
          this.$router.push({
            path: "/recorddetial"
          });
        }else{
            MessageBox("提示", "更新失败，请稍后再试");
        }
      });
    },
    createCase: function() {
      if(this.DiagnosticTime){
        if(this.DiagnosticTime.length==10){
          this.DiagnosticTime+=' 00:00:00'
       }
      }
      let param = {
        // RecordTime:this.CreateTime,
        UserId: this.userId,
        TumorName: this.TumorName,
        DiagnosticTime: this.DiagnosticTime,
        FamilyHistory: this.familyHistory,
        PhysicalCondition: this.bodySituation,
        Weight: this.weight,
        BrainCondition: this.headSituation
      };
      Indicator.open({
        spinnerType: 'fading-circle'
      });
      createCase(param).then(res => {
        if (res.data.IsSuccess) {
          Indicator.close();
          MessageBox("提示", "创建成功");
          localStorage.setItem("RecordId", res.data.Result);
          this.$router.push({
            path: "/recorddetial"
          });
        }else{
            MessageBox("提示", "创建失败，请稍后再试");
        }
      });
    },
    getUserBaseInfo: function(item) {
      this.username=item.Name;
      this.gender=item.Gender;
      this.bornDate=item.Birthday;
      this.weight=item.Weight;
      this.familyHistory=item.FamilyHistory;
      this.TumorName=item.TumorName;
      this.DiagnosticTime=item.DiagnosticTime;
      this.bodySituation=item.PhysicalCondition;
      this.headSituation=item.BrainCondition;
      if(this.bornDate){
        if(this.bornDate.length>10){
        var birthday=this.bornDate.substr(0,10);
        this.bornDate=birthday;
      }
      }
      if(this.DiagnosticTime){
        if(this.DiagnosticTime.length>10){
        var diaTime=this.DiagnosticTime.substr(0,10);
        this.DiagnosticTime=diaTime;
      }
      }
    },
    judgeIfIsNewReport: function() {
      if (this.$route.params.item) {
        console.log('传递过来的基础信息item===>',this.$route.params.item)
        this.getUserBaseInfo(this.$route.params.item);
        this.isNewBaseInfo = false;
        this.caseId = localStorage.getItem("RecordId");
      } else {
        this.isNewBaseInfo = true;
        this.caseId = "";
      }
    }
  },
  mounted() {
    this.judgeIfIsNewReport();
    // this.getUserBaseInfo();
    this.userId = localStorage.getItem("choosePatientId");
  }
};
</script>
<style lang="scss" scoped>
.w1{
  min-width: 100px;
  display: inline-block;
  color:#666;
}
.message {
  width: 90%;
  left: 5%;
  margin: 5% auto 0;
}
.myrow {
  height: 50px;
  line-height: 52px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content:flex-start
}
.next {
  width: 90%;
  height: 40px;
  position: fixed;
  bottom: 40px;
  left: 5%;
  border-radius: 5px;
  color: white;
  text-align: center;
  line-height: 45px;
  letter-spacing: 3px;
  background-color: rgba(0, 146, 252, 0.5);
}
.w3{
  display: inline-block;
  outline: none
}
.w4{
  min-width: 120px;;
}
.cube-input {
  position:static
}
.cube-select{
  padding: 16px 20px 10px 10px;
  position:static;
  width:100%;
  text-align: left;
}
.cube-select-icon{
  display: none;
}
.cube-input-field{
  height:50px;
}
</style>

